<template>
    <div>
         <el-form   class="form"
        label-position="left"  :model="form"
        :rules="rules"  ref="form">
        <el-form-item prop="scenic_name" label="名称" style="width:80px">
          <el-input  v-model="form.scenic_name" style="width:180px"
            placeholder="请输入景点名称"></el-input>
        </el-form-item>
        <el-form-item prop="scenic_price" label="票价/元" style="width:80px">
          <el-input  v-model="form.scenic_price" style="width:180px"
            type="text" placeholder="请输入票价"></el-input>
        </el-form-item>
        <el-form-item prop="scenic_desc" label="简介" style="height:50px; margin-bottom:80px;width:600px">
          <el-input type="textarea" v-model="form.scenic_desc" placeholder="请输入简介"></el-input>
        </el-form-item>
        <el-form-item label="选择图片" prop="scenic_img">
          <el-upload v-model="form.scenic_img"
            class="avatar-uploader"
            action="http://localhost:6688/upload"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          ><img v-if="form.scenic_img" :src="form.scenic_img" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>

        
        <el-form-item style="width:100px">
          <el-button type="primary" style="width: 100%" @click="edit()" >修改</el-button>
        </el-form-item>
      </el-form>
    </div>
</template>

<script>
    // import myaxios from '../../http/Myaxios'
import { getSceincById, editScenicAPI } from '@/api'
    export default {
        mounted() {
            this.scenicId = this.$route.params.scenic_id
            // console.log('景点列表传递的参数',this.scenicId);
            this.getScenic()
        },
        data() {
            return {
                form: {
                    scenic_name:'',
                    scenic_price:'',
                    scenic_desc:'',
                    scenic_img:''
                },
                rules: {
                    scenic_name:[{required:true,message:'景点名称必填',trigger:'blur'}],
                    scenic_price:[{required:true,message:'票价必填',trigger:'blur'}],
                    scenic_desc:[{required:true,message:'景点简介必填',trigger:'blur'}],
                    scenic_img:[{required:true,message:'景点图片必填',trigger:'blur'}]
                },
                scenicId: ''
            }
        },
        methods: {
          async getScenic() {
            const res = await getSceincById({scenicId: this.scenicId})
            // console.log('查询景点ID',res);
            this.form = res.data.data[0]
          },
            edit() {
                this.$refs['form'].validate(async valid => {
                  if (valid) {
                    console.log('表单数据：scenic_id',this.form);
                    const res = await editScenicAPI(this.form)
                    console.log('修改景点', res);
                    if(res.data.code === 200) {
                      this.$message.success('修改成功！')
                      this.$router.push('/home/scenicList')
                    }
                  }
                })
            },
            handleAvatarSuccess(res,file) {
              console.log('结果',res);
              // this.form.scenic_img = res.data
            },
            beforeAvatarUpload() {}
        },
    }
</script>
<style lang="scss" >
  .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 260px;
  height: 260px;
  display: block;
}
</style>
